import React, { FC, useState } from 'react';
import styles from './searchIcon.module.less';
import { SearchOutlined } from '@ant-design/icons';
import SearchDrawer from '@/components/search-drawer/SearchDrawer';

interface ISearchIcon {
  handleSearch?: (value: string) => void;
  placeholder?: string;
}

const SearchIcon: FC<ISearchIcon> = (props) => {
  const [search, setSearch] = useState('');

  const [visible, setSearchDrawerVisible] = useState(false);

  const handleSearch = (value: string) => {
    setSearch(value);
    props.handleSearch && props.handleSearch(value);
  };

  return (
    <div>
      <div
        className={`${styles.search} ${
          search.length ? styles.searchActive : ''
        }`}
        onClick={() => setSearchDrawerVisible(true)}
      >
        <SearchOutlined style={{ fontSize: '16px' }} />
      </div>
      <SearchDrawer
        placeholder={props.placeholder}
        defaultValue={search}
        onSearch={handleSearch}
        visible={visible}
        setVisible={setSearchDrawerVisible}
      />
    </div>
  );
};
export default SearchIcon;
